<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>ECharts常用配置整理 | 个人技术的分享</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/logo.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/logo.png">
    <link rel="stylesheet" href="/styles/iconfont.css">
    <meta name="description" content="切图仔、CV/API工程师。">
    <link rel="preload" href="/assets/css/0.styles.bab1657c.css" as="style"><link rel="preload" href="/assets/js/app.dfe2ff49.js" as="script"><link rel="preload" href="/assets/js/3.bd810dc8.js" as="script"><link rel="preload" href="/assets/js/4.7eb6bf85.js" as="script"><link rel="preload" href="/assets/js/48.41fd0e4b.js" as="script"><link rel="prefetch" href="/assets/js/10.9314e6e2.js"><link rel="prefetch" href="/assets/js/100.aff7ce2a.js"><link rel="prefetch" href="/assets/js/101.6d8bb072.js"><link rel="prefetch" href="/assets/js/102.ab4c6afe.js"><link rel="prefetch" href="/assets/js/103.f613c5b8.js"><link rel="prefetch" href="/assets/js/104.3cd8f787.js"><link rel="prefetch" href="/assets/js/105.ddd67c67.js"><link rel="prefetch" href="/assets/js/106.bf26ab7e.js"><link rel="prefetch" href="/assets/js/107.2a6632ce.js"><link rel="prefetch" href="/assets/js/108.5885d4d6.js"><link rel="prefetch" href="/assets/js/109.22628ed2.js"><link rel="prefetch" href="/assets/js/11.67c23384.js"><link rel="prefetch" href="/assets/js/110.8dcf645b.js"><link rel="prefetch" href="/assets/js/111.a75b4e6d.js"><link rel="prefetch" href="/assets/js/112.762ffa1c.js"><link rel="prefetch" href="/assets/js/113.c5b41064.js"><link rel="prefetch" href="/assets/js/114.34ec817a.js"><link rel="prefetch" href="/assets/js/115.5f0aa55b.js"><link rel="prefetch" href="/assets/js/116.698defdd.js"><link rel="prefetch" href="/assets/js/117.bb7bcca3.js"><link rel="prefetch" href="/assets/js/118.2d66657c.js"><link rel="prefetch" href="/assets/js/119.8a262cdd.js"><link rel="prefetch" href="/assets/js/12.bb124c65.js"><link rel="prefetch" href="/assets/js/120.3c491dee.js"><link rel="prefetch" href="/assets/js/121.3505af80.js"><link rel="prefetch" href="/assets/js/122.04e9a7cf.js"><link rel="prefetch" href="/assets/js/123.4e17d778.js"><link rel="prefetch" href="/assets/js/124.13b04833.js"><link rel="prefetch" href="/assets/js/125.bd0012a2.js"><link rel="prefetch" href="/assets/js/126.99cc4ec3.js"><link rel="prefetch" href="/assets/js/127.b5a83745.js"><link rel="prefetch" href="/assets/js/128.56b40a89.js"><link rel="prefetch" href="/assets/js/129.1489ad27.js"><link rel="prefetch" href="/assets/js/13.1e4b99c7.js"><link rel="prefetch" href="/assets/js/130.c64a96a8.js"><link rel="prefetch" href="/assets/js/131.7dbeedc5.js"><link rel="prefetch" href="/assets/js/132.c11a3a90.js"><link rel="prefetch" href="/assets/js/133.c02b1035.js"><link rel="prefetch" href="/assets/js/134.27e97bf6.js"><link rel="prefetch" href="/assets/js/135.5cf1ffcb.js"><link rel="prefetch" href="/assets/js/136.732866b5.js"><link rel="prefetch" href="/assets/js/137.71150c2b.js"><link rel="prefetch" href="/assets/js/138.6edc5f97.js"><link rel="prefetch" href="/assets/js/139.7dc5785a.js"><link rel="prefetch" href="/assets/js/14.230d6df1.js"><link rel="prefetch" href="/assets/js/140.df409b41.js"><link rel="prefetch" href="/assets/js/141.23e4a662.js"><link rel="prefetch" href="/assets/js/15.fbe6b5b2.js"><link rel="prefetch" href="/assets/js/16.72f3903d.js"><link rel="prefetch" href="/assets/js/17.667ac210.js"><link rel="prefetch" href="/assets/js/18.9b60328e.js"><link rel="prefetch" href="/assets/js/19.d1bb7ffd.js"><link rel="prefetch" href="/assets/js/20.4bf72a89.js"><link rel="prefetch" href="/assets/js/21.d62b0bbb.js"><link rel="prefetch" href="/assets/js/22.c15b497e.js"><link rel="prefetch" href="/assets/js/23.583da9a1.js"><link rel="prefetch" href="/assets/js/24.59df73ca.js"><link rel="prefetch" href="/assets/js/25.ae681969.js"><link rel="prefetch" href="/assets/js/26.4652101c.js"><link rel="prefetch" href="/assets/js/27.4f2c4857.js"><link rel="prefetch" href="/assets/js/28.cd131e05.js"><link rel="prefetch" href="/assets/js/29.3d4a8ee1.js"><link rel="prefetch" href="/assets/js/30.bc6d42d1.js"><link rel="prefetch" href="/assets/js/31.2c405117.js"><link rel="prefetch" href="/assets/js/32.0ceecc6e.js"><link rel="prefetch" href="/assets/js/33.12a93636.js"><link rel="prefetch" href="/assets/js/34.f4994641.js"><link rel="prefetch" href="/assets/js/35.926aff5c.js"><link rel="prefetch" href="/assets/js/36.1850fac0.js"><link rel="prefetch" href="/assets/js/37.7990b07f.js"><link rel="prefetch" href="/assets/js/38.0c59d91b.js"><link rel="prefetch" href="/assets/js/39.f5ad73cc.js"><link rel="prefetch" href="/assets/js/40.9853630f.js"><link rel="prefetch" href="/assets/js/41.ee8f051d.js"><link rel="prefetch" href="/assets/js/42.03d761cf.js"><link rel="prefetch" href="/assets/js/43.6f6c7421.js"><link rel="prefetch" href="/assets/js/44.47e28062.js"><link rel="prefetch" href="/assets/js/45.af48f901.js"><link rel="prefetch" href="/assets/js/46.c2ef1108.js"><link rel="prefetch" href="/assets/js/47.3b754edd.js"><link rel="prefetch" href="/assets/js/49.fa8bb2d6.js"><link rel="prefetch" href="/assets/js/5.9554ffdf.js"><link rel="prefetch" href="/assets/js/50.470960b6.js"><link rel="prefetch" href="/assets/js/51.f641e205.js"><link rel="prefetch" href="/assets/js/52.292aa625.js"><link rel="prefetch" href="/assets/js/53.06feb6d0.js"><link rel="prefetch" href="/assets/js/54.bd22026a.js"><link rel="prefetch" href="/assets/js/55.ea51cd92.js"><link rel="prefetch" href="/assets/js/56.f909fe9f.js"><link rel="prefetch" href="/assets/js/57.02f3b546.js"><link rel="prefetch" href="/assets/js/58.70a7433b.js"><link rel="prefetch" href="/assets/js/59.c0fc6ad7.js"><link rel="prefetch" href="/assets/js/6.32562f11.js"><link rel="prefetch" href="/assets/js/60.6e2b4c40.js"><link rel="prefetch" href="/assets/js/61.a52a09ff.js"><link rel="prefetch" href="/assets/js/62.27ccbcf9.js"><link rel="prefetch" href="/assets/js/63.8a96fdd6.js"><link rel="prefetch" href="/assets/js/64.4c572d6a.js"><link rel="prefetch" href="/assets/js/65.b1d5b340.js"><link rel="prefetch" href="/assets/js/66.7107370e.js"><link rel="prefetch" href="/assets/js/67.666b4292.js"><link rel="prefetch" href="/assets/js/68.8c3bd9eb.js"><link rel="prefetch" href="/assets/js/69.4c5cd008.js"><link rel="prefetch" href="/assets/js/7.84c0fac9.js"><link rel="prefetch" href="/assets/js/70.c219a726.js"><link rel="prefetch" href="/assets/js/71.a952c191.js"><link rel="prefetch" href="/assets/js/72.b1635d94.js"><link rel="prefetch" href="/assets/js/73.c828f2de.js"><link rel="prefetch" href="/assets/js/74.29555c6a.js"><link rel="prefetch" href="/assets/js/75.ddd32435.js"><link rel="prefetch" href="/assets/js/76.33b11087.js"><link rel="prefetch" href="/assets/js/77.1992b55d.js"><link rel="prefetch" href="/assets/js/78.6e4af851.js"><link rel="prefetch" href="/assets/js/79.0c6e5357.js"><link rel="prefetch" href="/assets/js/8.b775bc4d.js"><link rel="prefetch" href="/assets/js/80.a2494e79.js"><link rel="prefetch" href="/assets/js/81.ba3634f7.js"><link rel="prefetch" href="/assets/js/82.bf7c34dc.js"><link rel="prefetch" href="/assets/js/83.a424781a.js"><link rel="prefetch" href="/assets/js/84.1024c1e9.js"><link rel="prefetch" href="/assets/js/85.75a55948.js"><link rel="prefetch" href="/assets/js/86.f957a19e.js"><link rel="prefetch" href="/assets/js/87.0d718ad6.js"><link rel="prefetch" href="/assets/js/88.f17614e7.js"><link rel="prefetch" href="/assets/js/89.354fe35d.js"><link rel="prefetch" href="/assets/js/9.8eda8208.js"><link rel="prefetch" href="/assets/js/90.6dd96ee4.js"><link rel="prefetch" href="/assets/js/91.136af10e.js"><link rel="prefetch" href="/assets/js/92.a9c072ce.js"><link rel="prefetch" href="/assets/js/93.c52cc17a.js"><link rel="prefetch" href="/assets/js/94.03f26b32.js"><link rel="prefetch" href="/assets/js/95.2d937101.js"><link rel="prefetch" href="/assets/js/96.b93eee83.js"><link rel="prefetch" href="/assets/js/97.075388e9.js"><link rel="prefetch" href="/assets/js/98.297b61d9.js"><link rel="prefetch" href="/assets/js/99.df97102a.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2e6ea98f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.bab1657c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="图标: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.png" alt="个人技术的分享" class="logo"> <span class="site-name">个人技术的分享</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          博文
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/blog/leetcode/">
          LeetCode
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/thoughts/">
          随想
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/blog/frontend/" aria-current="page" title="快速导航" class="sidebar-link">快速导航</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JS/ES6/ES6+</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS/HTML</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Web APIs</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Webpack相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>npm相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>GIS相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>未分类文章</span> <span class="arrow down"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/frontend/other/swiper-loop-stop-on-last-slide.html" title="Swiper设置环路轮播到最后一个停止的问题" class="sidebar-link">Swiper设置环路轮播到最后一个停止的问题</a></li><li><a href="/blog/frontend/other/use-echart-in-react-and-vue.html" title="在React和Vue中使用ECharts" class="sidebar-link">在React和Vue中使用ECharts</a></li><li><a href="/blog/frontend/other/echart-basic-config.html" aria-current="page" title="ECharts常用配置整理" class="active sidebar-link">ECharts常用配置整理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_1-存在多条纵轴" title="1.存在多条纵轴" class="sidebar-link">1.存在多条纵轴</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_2-grid网格位置和datazoom数据区域" title="2.grid网格位置和dataZoom数据区域" class="sidebar-link">2.grid网格位置和dataZoom数据区域</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_3-导出图表为图片" title="3.导出图表为图片" class="sidebar-link">3.导出图表为图片</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_4-设置大标题居中" title="4.设置大标题居中" class="sidebar-link">4.设置大标题居中</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_5-setoption" title="5.setOption()" class="sidebar-link">5.setOption()</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_6-横向柱状图-数据顺序从上到下" title="6.横向柱状图（数据顺序从上到下）" class="sidebar-link">6.横向柱状图（数据顺序从上到下）</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_7-datazoom锁定" title="7.dataZoom锁定" class="sidebar-link">7.dataZoom锁定</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_8-图例显示更多信息" title="8.图例显示更多信息" class="sidebar-link">8.图例显示更多信息</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_9-轴线相关" title="9.轴线相关" class="sidebar-link">9.轴线相关</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_10-设置曲线阴影部分渐变" title="10.设置曲线阴影部分渐变" class="sidebar-link">10.设置曲线阴影部分渐变</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_11-去除饼图标签和线" title="11.去除饼图标签和线" class="sidebar-link">11.去除饼图标签和线</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/other/echart-basic-config.html#_12-修改图例样式" title="12.修改图例样式" class="sidebar-link">12.修改图例样式</a></li></ul></li><li><a href="/blog/frontend/other/bootstrap-select-reset-tip.html" title="表单验证中重置BootStrap-select验证提示不清除的坑" class="sidebar-link">表单验证中重置BootStrap-select验证提示不清除的坑</a></li><li><a href="/blog/frontend/other/bootstrap-submit-validator.html" title="表单验证中的非Submit类型按钮点击时触发验证的坑" class="sidebar-link">表单验证中的非Submit类型按钮点击时触发验证的坑</a></li><li><a href="/blog/frontend/other/bootstrap-validator&amp;bootstrap-datetimepicker.html" title="BootStrapValidator无法自动验证BootStrap-datetimepicker的坑" class="sidebar-link">BootStrapValidator无法自动验证BootStrap-datetimepicker的坑</a></li></ul></section></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="echart常用配置整理"><a href="#echart常用配置整理" class="header-anchor">#</a> EChart常用配置整理</h1> <!----> <blockquote><p><code>ECharts</code>是一款功能强大的<strong>数据可视化</strong>JavaScript库，基于HTML5 Canvas。可以提供种类丰富、交互功能强大、数据视图直观的图表。</p> <p>本文整理了<code>ECharts</code>的常用配置，<strong>不断更新</strong>！📝</p></blockquote> <p><strong>参考资料：</strong></p> <ul><li><a href="https://echarts.apache.org/zh/api.html#echarts" target="_blank" rel="noopener noreferrer">ECharts Documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="_1-存在多条纵轴"><a href="#_1-存在多条纵轴" class="header-anchor">#</a> 1.存在多条纵轴</h2> <blockquote><p><code>ECharts</code><strong>曲线-柱状混合图</strong>官方实例<a href="https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar" target="_blank" rel="noopener noreferrer">ECharts-Mixed Line and Bar<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <iframe height="400" width="100%" src="https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <p>存在多条纵轴时要用<code>yAxisIndex</code>来<strong>标识当前的数据对应哪条轴</strong>，<strong>默认为0</strong>，就是左边这条纵轴。</p> <p><img src="/images/frontend/other/echart-config-01.png" alt="echart-config-01"></p> <p><code>yAxisIndex</code>不能乱标，否则会报下面的错误。</p> <p><img src="/images/frontend/other/echart-config-02.png" alt="echart-config-02"></p> <h2 id="_2-grid网格位置和datazoom数据区域"><a href="#_2-grid网格位置和datazoom数据区域" class="header-anchor">#</a> 2.<code>grid</code>网格位置和<code>dataZoom</code>数据区域</h2> <blockquote><p><code>grid</code>配置文档<a href="https://echarts.apache.org/zh/option.html#grid" target="_blank" rel="noopener noreferrer">ECharts-option-grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token comment">// 网格位置 配置项文档：</span>
  <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'10%'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">'10%'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'5%'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token string">'5%'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 数据区域</span>
  <span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
	  <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_3-导出图表为图片"><a href="#_3-导出图表为图片" class="header-anchor">#</a> 3.导出图表为图片</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'my-chart'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> imageURL <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">getDataURL</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token comment">// 获取base64数据</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'png'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">pixelRatio</span><span class="token operator">:</span> <span class="token number">2</span><span class="token comment">// 像素比</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
link<span class="token punctuation">.</span>href <span class="token operator">=</span> imageURL<span class="token punctuation">;</span>
link<span class="token punctuation">.</span>download <span class="token operator">=</span> <span class="token string">'统计图'</span><span class="token punctuation">;</span>
link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="_4-设置大标题居中"><a href="#_4-设置大标题居中" class="header-anchor">#</a> 4.设置大标题居中</h2> <blockquote><p><code>title</code>配置文档<a href="https://echarts.apache.org/zh/option.html#title" target="_blank" rel="noopener noreferrer">ECharts-option-title<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></blockquote> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'xxxx统计图'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span><span class="token comment">// 字体颜色</span>
      <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token number">700</span><span class="token punctuation">,</span><span class="token comment">// 字体粗细</span>
      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span><span class="token comment">// 字体大小</span>
      <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span><span class="token comment">// 居中</span>
      <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">20</span><span class="token comment">// 行高</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_5-setoption"><a href="#_5-setoption" class="header-anchor">#</a> 5.<code>setOption()</code></h2> <blockquote><p><code>chart.setOption(option, notMergen, lazyUpdate)</code>。</p> <p>官方文档：<a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank" rel="noopener noreferrer">ECharts-setOption<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>为了<strong>去数据串联</strong>，最好还是将<code>notMergen</code>设为<code>true</code>。</p> <p>这样每次更新<code>option</code>的时候都不会与之前的合并。</p></div> <p><img src="/images/frontend/other/echart-config-03.png" alt="echart-config-03"></p> <p><img src="/images/frontend/other/echart-config-04.png" alt="echart-config-04"></p> <h2 id="_6-横向柱状图-数据顺序从上到下"><a href="#_6-横向柱状图-数据顺序从上到下" class="header-anchor">#</a> 6.横向柱状图（数据顺序从上到下）</h2> <p><img src="/images/frontend/other/echart-config-05.png" alt="echart-config-05"></p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;category&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> yAxisData<span class="token punctuation">,</span><span class="token comment">// y轴坐标</span>
    <span class="token literal-property property">inverse</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token comment">// 倒序</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;bar&quot;</span><span class="token punctuation">,</span><span class="token comment">// 柱状图</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> datas<span class="token punctuation">,</span>
    <span class="token literal-property property">barWidth</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span><span class="token comment">// 柱状图📊的宽度</span>
    <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#000&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token comment">// 在柱状图柱子顶部显示数值 如果是纵向柱状图，position为top</span>
          <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">&quot;right&quot;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="_7-datazoom锁定"><a href="#_7-datazoom锁定" class="header-anchor">#</a> 7.<code>dataZoom</code>锁定</h2> <blockquote><p>有时候数据太多，而容器的大小有限，而此时数据又太多。所以可以锁定🔒<code>dataZoom</code>滑块的长度，<strong>不让用户自由拖动改变其长度</strong>。</p></blockquote> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">dataZoom</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;slider&quot;</span><span class="token punctuation">,</span><span class="token comment">// 类型 “slider”</span>
    <span class="token literal-property property">show</span> <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">&quot;vertical&quot;</span><span class="token punctuation">,</span><span class="token comment">// 设置dataZoom的摆放方式</span>
    <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token comment">// 设定滑块的起始位置</span>
    <span class="token literal-property property">end</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span><span class="token comment">// 设定滑块终止位置 其实就是设置滑块的长度</span>
    <span class="token literal-property property">zoomLock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token comment">// 锁定</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="_8-图例显示更多信息"><a href="#_8-图例显示更多信息" class="header-anchor">#</a> 8.图例显示更多信息</h2> <p><code>ECharts</code>的图表的图例默认<strong>只显示颜色和对应的数据的名称</strong>，现实业务中需要的不仅仅是这些，可能还要显示数值、占比等信息。</p> <p><img src="/images/frontend/other/echart-config-06.png" alt="echart-config-06"></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">&quot;vertical&quot;</span><span class="token punctuation">,</span><span class="token comment">// 图例类型 -&gt; 垂直</span>
    <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token string">&quot;20%&quot;</span><span class="token punctuation">,</span><span class="token comment">// 图例位置</span>
    <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">&quot;40%&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> legendData<span class="token punctuation">,</span>
    <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> count <span class="token operator">=</span> <span class="token keyword">null</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      datas<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token comment">// 遍历datas获取数值</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          count <span class="token operator">=</span> item<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
          <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">个</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><span class="token comment">// 使用字符串模板组装要显示的内容</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><iframe height="400" width="100%" src="https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <h2 id="_9-轴线相关"><a href="#_9-轴线相关" class="header-anchor">#</a> 9.轴线相关</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> xAxisData<span class="token punctuation">,</span>
    <span class="token comment">// 坐标轴轴线</span>
    <span class="token literal-property property">axisLine</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#05A9CF'</span><span class="token comment">// 指定颜色</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 坐标轴刻度线</span>
    <span class="token literal-property property">axisTick</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 显示区域刻度线</span>
    <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">lineStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
         <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#05A9CF'</span><span class="token comment">// 指定颜色</span>
       <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="_10-设置曲线阴影部分渐变"><a href="#_10-设置曲线阴影部分渐变" class="header-anchor">#</a> 10.设置曲线阴影部分渐变</h2> <p>效果如下图所示↓：</p> <p><img src="/images/frontend/other/echart-config-07.png" alt="echart-config-07"></p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xxxxx'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> datas<span class="token punctuation">,</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">smooth</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">// 是否顺滑</span>
    <span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">// 从这里开始</span>
      <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">echarts<span class="token punctuation">.</span>graphic<span class="token punctuation">.</span>LinearGradient</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
          <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgba(0,202,149,0.3)'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgba(0,202,149,0)'</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'rgba(0,202,149, 0.9)'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">20</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h2 id="_11-去除饼图标签和线"><a href="#_11-去除饼图标签和线" class="header-anchor">#</a> 11.去除饼图标签和线</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'访问来源'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token string">'55%'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'60%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token comment">// 去除饼图标签和线</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><img src="/images/frontend/other/echart-config-08.png" alt="echart-config-08"></p> <h2 id="_12-修改图例样式"><a href="#_12-修改图例样式" class="header-anchor">#</a> 12.修改图例样式</h2> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token string">'0%'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'直接访问'</span><span class="token punctuation">,</span> <span class="token string">'邮件营销'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">itemWidth</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>   <span class="token comment">// 设置图例图形的宽</span>
    <span class="token literal-property property">itemHeight</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span>  <span class="token comment">// 设置图例图形的高</span>
    <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">// 图例文字样式</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><img src="/images/frontend/other/echart-config-09.png" alt="echart-config-09"></p> <p>🍗 不断更新...</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2 years ago</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/blog/frontend/other/use-echart-in-react-and-vue.html" class="prev"><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        在React和Vue中使用ECharts
      </a></span> <span class="next"><a href="/blog/frontend/other/bootstrap-select-reset-tip.html">
        表单验证中重置BootStrap-select验证提示不清除的坑
        <i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:10px;bottom:60px;width:135px;height:300px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="135" height="300" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:135px;height:300px;"></canvas></div></div></div>
    <script src="/assets/js/app.dfe2ff49.js" defer></script><script src="/assets/js/3.bd810dc8.js" defer></script><script src="/assets/js/4.7eb6bf85.js" defer></script><script src="/assets/js/48.41fd0e4b.js" defer></script>
  </body>
</html>